<template>
  <div class="detail">

    <!-- 顶部导航栏 -->
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="$router.back()">
      <template #right>
        <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end" @select="selectHandler">
          <template #reference>
            <!--  三个点 -->
            <van-icon name="ellipsis" size="30" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>




    <!-- 分享面板 -->

    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect2" />


    <!-- 商品详情  -->
    <div class="content">
      <div class="banner">
        <van-swipe ref="swipe">
          <van-swipe-item v-for="(item, index) of swiperArr" :key="index" @click="swiperItemClickHandler(index)">
            <img :src="item" alt="" />
          </van-swipe-item>
        </van-swipe>
        <div class="btn-play" @click="handleVideoPlay">
          <van-icon name="play-circle" />
          <span class="time">{{ videoTime }}</span>
        </div>
        <van-popup v-model:show="showVideo" @close="hideVideHandler">
          <video ref="video" controls src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4" preload="preload"></video>
        </van-popup>
      </div>
      <h3 class="price">
        ¥ <span class="price-value">{{ price }}</span>
      </h3>
      <h3 class="detail-name">
        <van-tag type="danger">自营</van-tag>
        <span class="name">{{ proname }}</span>
      </h3>
    </div>
    <div class="details-footer">
      <van-action-bar>
        <van-action-bar-icon icon="cart-o" to="/cart" text="购物车" />
        <van-action-bar-button type="warning" v-if="issale" @click="handleAddCart" text="加入购物车" />
        <van-action-bar-button type="danger" v-if="issale" text="立即购买" />
        <van-action-bar-button type="danger" v-else disabled text="已下架" />
      </van-action-bar>
    </div>

  </div>
</template>

<script setup lang="ts">

import { showToast, showImagePreview } from 'vant';
import { reactive, ref, onMounted, nextTick } from 'vue'

import { proDetail } from '@/apis/pro'
import { useRouter, useRoute } from 'vue-router'

import { useUserStore } from '@/store/userStore'

const route = useRoute()

const router = useRouter()

const user = useUserStore()






// 获取商品详情数据
const bannerImg = ref(''); // 显示的商品大图
const proname = ref(''); // 商品名称
const price = ref('');// 商品原价
const swiperArr = ref([]);// 轮播图列表
const issale = ref(1);// 是否在售卖，是1，否0


// 发送请求获取数据

onMounted(() => {
  console.log(route.params.id)
  proDetail(route.params.id).then(res => {
    console.log(res)

    // 获取商品数据成功
    proname.value = res.data.proname;
    price.value = res.data.originprice;
    bannerImg.value = res.data.banners[0].split(',')[0];
    issale.value = res.data.issale;
    // 轮播图列表
    swiperArr.value = [res.data.img1, res.data.img2, res.data.img3, res.data.img4]
  })
})

const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '首页', icon: 'wap-home-o', path: '/' },
  { text: '购物车', icon: 'shopping-cart-o', path: '/cart' },
  { text: '分享', icon: 'share-o', path: 'share' },
]
const selectHandler = (action) => {
  showToast(action.text);
  if (action.text == '分享') {

    showShare.value = true
  } else {

    router.push(action.path)
  }
}




// 弹框分享 
const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];
const onSelect2 = (option) => {
  showToast(option.name);
  showShare.value = false;
};












// 点击图片显示图片预览
const swiperItemClickHandler = (index: number) => {
  // 被点击的图片的索引
  console.log(index);
  // 图片预览，当前在哪个图点击就从哪个图开始预览
  showImagePreview({
    images: swiperArr.value,
    startPosition: index,
    closeable: true,
  });
}




// 视频播放 

const showVideo = ref(false)

const videoTime = '00′55″';// 视频总时长


const video = ref<HTMLVideoElement | null>(null);// video元素

// 打开刷视频
const handleVideoPlay = () => {
  // 1 打开弹框
  // 2 记录时间   准备开始播放 
  showVideo.value = true

  console.dir(1) // video 标签元
  console.dir(video.value) // video 标签元素   


  // 异步更新后立马获取更新后的dom 的数据或者元素 必须要 nextTick
  nextTick(() => {
    console.dir(2)
    console.dir(video.value) // video 标签元素  
    video.value.play()
  })
}



// 关闭视频
const hideVideHandler = () => {
  showVideo.value = false
  // 视频暂停播放
  video.value.pause();
  // 下次视频从0秒开始
  video.value.currentTime = 0
}


</script>

<style scoped lang="scss">
.detail {
  .content {
    height: calc(100vh - 100px);
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .van-swipe-item {
    img {
      width: 100%;
    }
  }

  .banner {
    position: relative;

    .btn-play {
      background: #fff;
      position: absolute;
      left: 50%;
      bottom: 5%;
      transform: translate(-50%, -50%);
      font-weight: bold;
      font-size: 30px;
      text-align: left;
      box-sizing: border-box;
      padding: 0 8px 0 2px;
      width: 85px;
      height: 32px;
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      opacity: 0.95;

      .van-icon {
        color: #ee0a24;
        margin: 2px;
      }

      .time {
        font-size: 12px;
        color: #262626;
        line-height: 30px;
      }
    }

    video {
      width: 100%;
    }
  }

  .price {
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    color: #ee0a24;
    padding-left: 15px;
    margin: 5px;

    .price-value {
      font-size: 20px;
    }
  }

  .detail-name {
    text-align: left;
    padding: 0 15px;
    margin: 5px;

    .van-tag {
      margin-right: 3%;
      transform: translateY(-20%);
    }
  }
}
</style>